<template>
	<view>
		<view class="bgView flexStandard">
			<view class="titleBox">
				<view class="titleView"><text class="title">备付金余额</text></view>
				<view><text class="num">{{reserveAmount}}</text></view>
			</view>
		</view>

		<view class="czhiView flexVertical">
			<text>充值金额</text>
		</view>


		<view class="flexCenten">
			<view class="btnView">
				<view v-for="(item,index) in numArray" :key="index"
					:class="activeIndex === index ? 'flexCenten active':'flexCenten noactive'"
					@click="activethis(item,index)">
					<text v-if="item!='m'" class="otherText">￥{{item}}</text>
					<text v-if="item=='m' && activeIndex != index" class="zidyText">自定义金额</text>
					<u--input color="#000" v-if="item=='m' && activeIndex == index" type="digit" @change="priceChange"
						placeholder="请输入金额" border="bottom" clearable></u--input>
				</view>
			</view>
		</view>

		<view class="czhiBox flexStandard">
			<view class="btnczhi flexCenten">
				<button class="btn_recharge" @click="recharge">立即充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				activeIndex: 0, //默认选中第一个
				numArray: [100, 200, 500, 1000, 10000, 'm'],
				reserveAmount: 0,
				customPrice: '',
				timer: null,
			}
		},
		onLoad() {
			// console.log(parseInt(2222) + parseInt(1));
			// console.log(parseInt(new Date().getTime() / 1000));
			/* uniCloud.callFunction({
				name: 'zhy-order',
				data: {
					operateType: 3,
					orderId: 'bs220240605151417274502'
				},
				success(res) {
					console.log(JSON.stringify(res));
				}
			}) */
			/* console.log(this.$mytools.regYuanToFen(5.3, 100));
			console.log(this.$mytools.regYuanToFen(0.3, 100));
			console.log(this.$mytools.regYuanToFen(5.32, 100));
			console.log(this.$mytools.regYuanToFen(0.005, 100));
			console.log(this.$mytools.regYuanToFen(0.05, 100)); */
			let businessInfo = uni.getStorageSync(app.globalData.session.businessInfo)
			this.reserveAmount = businessInfo.reverse_amount
		},
		methods: {
			activethis(item, index) { //点击选中事件
				console.log('111:' + JSON.stringify(item));
				console.log('111:' + JSON.stringify(index));
				let thisindex = index; //当前index
				this.activeIndex = thisindex
			},
			priceChange(e) {
				console.log(this.customPrice);
				console.log('金额变化:' + JSON.stringify(e));
				this.customPrice = e
				/* if (e != null && e != '' && e != undefined) {
					if (!this.isNumber(e)) {
						this.customPrice = ''
						uni.showToast({
							title: '请输入数字',
							icon: 'none'
						})
					} else {
						this.customPrice = e
					}
				} */
			},
			isNumber(value) {
				// return /^[1-9][0-9]*([\.][0-9]{1,2})?$/.test(value)
				let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
				if (reg.test(value)) {
					return true;
				} else {
					return false;
				};
			},
			recharge() {
				// 金额：单位：元
				let price = this.getSelectedPrice()
				// price = 0.01
				console.log(price);
				if (price == null || price == undefined || price == '') {
					uni.showToast({
						title: '请输入正确的金额',
						mask: true,
						icon: 'none'
					})
					return
				}
				if (!this.isNumber(price)) {
					this.customPrice = ''
					uni.showToast({
						title: '金额格式不正确',
						icon: 'none'
					})
					return
				}
				// 商户充值前缀：bs2,bs代表商户，2代表是充值
				let orderId = this.$idGenerator.createUniqueId('bs2')
				let params = {
					orderId: orderId,
					openid: uni.getStorageSync(app.globalData.session.userKey),
					amount: price,
					amountFen: this.$mytools.regYuanToFen(price, 100),
					title: '商户充值',
					type: 2, //商户充值
					remark: '备注:商户充值',
				}
				console.log(JSON.stringify(params));
				// 充值，发起支付
				let that = this
				// let zhyPay = this.$zhyPay
				this.$zhyPay.unifiedorder(params).then(res => {
					console.log('下单结果:');
					console.log(JSON.stringify(res));
					if (res.result == null) {
						console.log('下单失败');
						uni.showToast({
							title: '下单失败，请联系管理员！',
							mask: true,
							icon: 'none'
						})
					} else {
						console.log('下单成功');
						// 唤起支付
						res.result.orderId = orderId
						res.result.amountFen = params.amountFen
						this.$zhyPay.businessRecharge(res.result).then(res => {
							that.timer = setTimeout(() => {
								that.$logintool.login().then((eee) => {
									//更新
									let bs = uni.getStorageSync(app.globalData.session
										.businessInfo)
									uni.redirectTo({
										url: '/pages/newMy/businessRecharge/businessRecharge'
									})
								})
							}, 1000)
						}).catch(payErr => {
							console.log('发起支付失败:');
							// {"resultCode":"4000","errMsg":"requestPayment:fail 2"}
							// {"callbackUrl":"","extendInfo":{},"memo":"支付未完成","result":"","resultCode":"6001","errMsg":"resultCode:6001,memo:支付未完成"}
							let notifyTitle = '支付失败，请联系管理员！'
							if (payErr != null && payErr.errMsg != null && payErr.errMsg != undefined ||
								payErr.errMsg != '') {
								notifyTitle = '支付未完成'
							}
							console.log(JSON.stringify(payErr));
							uni.showToast({
								title: notifyTitle,
								mask: true,
								icon: 'none'
							})
						})
					}
					console.log(JSON.stringify(res));
				}).catch(err => {
					console.log('下单失败');
					console.log(JSON.stringify(err));
					uni.showToast({
						title: '下单失败，请联系管理员！',
						mask: true,
						icon: 'none'
					})
				})
			},
			getSelectedPrice() {
				if (this.activeIndex == 5) {
					return this.customPrice
				} else {
					return this.numArray[this.activeIndex]
				}
			}
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #eaeaea;
	}

	.active {
		background-color: #10190e;
		border: 2px solid #10190e;
		color: white;
	}

	.noactive {
		background-color: white;
		border: 2px solid white;
		color: black;
	}

	.btnView {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
	}

	.btnView view {
		width: 210rpx;
		height: 100rpx;
		margin: 10rpx;
		border-radius: 10rpx;
	}

	.otherText {
		/* color: black; */
		font-size: 38rpx;
		font-weight: 600;
	}

	.inputView {
		height: 100%;
		width: 100%;
		text-align: center;
		font-size: 38rpx;
		color: white;
	}

	.zidyText {
		font-size: 30rpx;
		font-weight: 600;
	}

	.bgView {
		background-image: linear-gradient(0deg, #808792, #08131b);
		height: 150rpx;
		width: 100%;
		margin-bottom: 30rpx;
	}

	.titleBox {
		text-align: center;
	}

	.title {
		color: white;
		font-size: 28rpx;
	}

	.titleView {
		margin-bottom: 20rpx;
	}

	.num {
		color: white;
		font-size: 40rpx;
		font-weight: 600;
	}

	.czhiView {
		width: 100%;
		height: 100rpx;
		background-color: white;
		padding: 0rpx 30rpx;
		margin-bottom: 10rpx;
	}

	.czhiView text {
		font-size: 28rpx;
	}

	.czhiBox {
		width: 100%;
	}

	.btnczhi1 {
		width: 94%;
		background-image: linear-gradient(45deg, #808792, #08131b);
		height: 80rpx;
		border-radius: 10rpx;
	}

	.btnczhi text {
		color: white;
		font-size: 32rpx;
	}

	.btn_recharge {
		width: 40%;
		background-image: linear-gradient(45deg, #808792, #08131b);
		border-radius: 10rpx;
		margin-left: 30%;
		text-align: center;
		color: white;
		font-size: 34rpx;
	}
</style>